<template>
  <!-- html -->
  <div class="person">
    <h2>需求 当水温打到60度，或水位打到80cm时，给服务器发送请求</h2>
    <h2>当前水温：{{ temp }}</h2>
    <h2>当前水位：{{ height }}</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水温+10</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, watch, watchEffect } from "vue";
let temp = ref(10);
let height = ref(0);
function changeTemp() {
  temp.value += 10;
}
function changeHeight() {
  height.value += 10;
}
//watch监视  明确指出监视谁
// watch([temp, height], (value) => {
//   console.log(value);
//   //从value中拿到最新的数据
//   let [newT, newH] = value;
//   if (newT >= 60 || newH >= 80) {
//     console.log("给服务器发请求");
//   }
// });

//watchEffect监视
watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    console.log("向服务器发请求");
  }
});
</script>

<style scoped>
/* 样式 */
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
